<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>1000px grid system | 20 columns ~ margin left: 10px ~ margin right: 10px &mdash; based on 960.gs</title>
<meta name="keywords" content="1000px grid system, grid system generator, variable grid system, custom grid system, css framework, generator, xhtml, css, grid system generator, 960 grid generator, 960 grid system generator, web development workflow, web development cycle"/>
<meta name="description" content="The 1000px grid system | 20 columns ~ margin left: 10px ~ margin right: 10px &mdash; is a valid css / xhtml framework for rapid prototyping, development and production environments (based on the 960.gs grid system)."/>
<meta name="generator" content="GridSystemGenerator.com - v1.04"/>
<style>/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}/* `Basic HTML
----------------------------------------------------------------------------------------------------*/

body {
	font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

a:focus {
	outline: 1px dotted;
}

hr {
	border: 0 #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0;
}

/* `Headings
----------------------------------------------------------------------------------------------------*/

h1 {
	font-size: 25px;
}

h2 {
	font-size: 23px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 19px;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 15px;
}

/* `Spacing
----------------------------------------------------------------------------------------------------*/

ol {
	list-style: decimal;
}

ul {
	list-style: disc;
}

li {
	margin-left: 30px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
	margin-bottom: 20px;
}</style>
<link rel="stylesheet" type="text/css" media="all" href="css/1000_20_10_10.css"/>
<style type="text/css" media="all">
body {
	background: #efefef;
	color: #333;
	font-size: 11px;
	padding: 20px 0 40px;
}
a {
	color: #333;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.container_20 h1 {
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.container_20 h2 {
	padding: 20px 0 0;
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.container_20 p {
	border: 1px solid #666;
	overflow: hidden;
	padding: 10px 0;
	text-align: center;
	font-size: 80%;
}
.container_20 {
	background-color:#FFFFFF;
	background-image: url(images/1000_20_10_10.png);
	background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="container_20">
<h1><a href="http://www.gridsystemgenerator.com/gs01.php?GridWidth=1000&amp;GridColumns=20&amp;GridMarginLeft=10&amp;GridMarginRight=10">1000px valid css/xhtml 960.gs grid system</a></h1>
<h2>20 columns ~ margin left: 10px ~ margin right: 10px</h2>
<div class="grid_20"><p>980px</p></div>
<!-- end .grid_20 -->
<div class="clear">&nbsp;</div>
<div class="grid_1">
<p>30px</p>
</div>
<!-- end .grid_1 -->
<div class="grid_19">
<p>930px</p>
</div>
<!-- end .grid_19 -->
<div class="clear">&nbsp;</div>
<div class="grid_2">
<p>80px</p>
</div>
<!-- end .grid_2 -->
<div class="grid_18">
<p>880px</p>
</div>
<!-- end .grid_18 -->
<div class="clear">&nbsp;</div>
<div class="grid_3">
<p>130px</p>
</div>
<!-- end .grid_3 -->
<div class="grid_17">
<p>830px</p>
</div>
<!-- end .grid_17 -->
<div class="clear">&nbsp;</div>
<div class="grid_4">
<p>180px</p>
</div>
<!-- end .grid_4 -->
<div class="grid_16">
<p>780px</p>
</div>
<!-- end .grid_16 -->
<div class="clear">&nbsp;</div>
<div class="grid_5">
<p>230px</p>
</div>
<!-- end .grid_5 -->
<div class="grid_15">
<p>730px</p>
</div>
<!-- end .grid_15 -->
<div class="clear">&nbsp;</div>
<div class="grid_6">
<p>280px</p>
</div>
<!-- end .grid_6 -->
<div class="grid_14">
<p>680px</p>
</div>
<!-- end .grid_14 -->
<div class="clear">&nbsp;</div>
<div class="grid_7">
<p>330px</p>
</div>
<!-- end .grid_7 -->
<div class="grid_13">
<p>630px</p>
</div>
<!-- end .grid_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_8">
<p>380px</p>
</div>
<!-- end .grid_8 -->
<div class="grid_12">
<p>580px</p>
</div>
<!-- end .grid_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_9">
<p>430px</p>
</div>
<!-- end .grid_9 -->
<div class="grid_11">
<p>530px</p>
</div>
<!-- end .grid_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_10">
<p>480px</p>
</div>
<!-- end .grid_10 -->
<div class="grid_10">
<p>480px</p>
</div>
<!-- end .grid_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_11">
<p>530px</p>
</div>
<!-- end .grid_11 -->
<div class="grid_9">
<p>430px</p>
</div>
<!-- end .grid_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_12">
<p>580px</p>
</div>
<!-- end .grid_12 -->
<div class="grid_8">
<p>380px</p>
</div>
<!-- end .grid_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_13">
<p>630px</p>
</div>
<!-- end .grid_13 -->
<div class="grid_7">
<p>330px</p>
</div>
<!-- end .grid_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_14">
<p>680px</p>
</div>
<!-- end .grid_14 -->
<div class="grid_6">
<p>280px</p>
</div>
<!-- end .grid_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_15">
<p>730px</p>
</div>
<!-- end .grid_15 -->
<div class="grid_5">
<p>230px</p>
</div>
<!-- end .grid_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_16">
<p>780px</p>
</div>
<!-- end .grid_16 -->
<div class="grid_4">
<p>180px</p>
</div>
<!-- end .grid_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_17">
<p>830px</p>
</div>
<!-- end .grid_17 -->
<div class="grid_3">
<p>130px</p>
</div>
<!-- end .grid_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_18">
<p>880px</p>
</div>
<!-- end .grid_18 -->
<div class="grid_2">
<p>80px</p>
</div>
<!-- end .grid_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_19">
<p>930px</p>
</div>
<!-- end .grid_19 -->
<div class="grid_1">
<p>30px</p>
</div>
<!-- end .grid_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 suffix_19">
<p>30px</p>
</div>
<!-- end .grid_1.suffix_19 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_1 suffix_18">
<p>30px</p>
</div>
<!-- end .grid_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_2 suffix_17">
<p>30px</p>
</div>
<!-- end .grid_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_3 suffix_16">
<p>30px</p>
</div>
<!-- end .grid_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_4 suffix_15">
<p>30px</p>
</div>
<!-- end .grid_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_5 suffix_14">
<p>30px</p>
</div>
<!-- end .grid_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_6 suffix_13">
<p>30px</p>
</div>
<!-- end .grid_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_7 suffix_12">
<p>30px</p>
</div>
<!-- end .grid_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_8 suffix_11">
<p>30px</p>
</div>
<!-- end .grid_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_9 suffix_10">
<p>30px</p>
</div>
<!-- end .grid_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_10 suffix_9">
<p>30px</p>
</div>
<!-- end .grid_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_11 suffix_8">
<p>30px</p>
</div>
<!-- end .grid_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_12 suffix_7">
<p>30px</p>
</div>
<!-- end .grid_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_13 suffix_6">
<p>30px</p>
</div>
<!-- end .grid_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_14 suffix_5">
<p>30px</p>
</div>
<!-- end .grid_14 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_15 suffix_4">
<p>30px</p>
</div>
<!-- end .grid_15 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_16 suffix_3">
<p>30px</p>
</div>
<!-- end .grid_16 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_17 suffix_2">
<p>30px</p>
</div>
<!-- end .grid_17 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_18 suffix_1">
<p>30px</p>
</div>
<!-- end .grid_18 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_19 suffix_0">
<p>30px</p>
</div>
<!-- end .grid_19 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 push_19">
<p>Push (30px)</p>
</div>
<!-- end .grid_1 .push_19 -->
<div class="grid_19 pull_1">
<p>Pull (930px)</p>
</div>
<!-- end .grid_19.pull_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_2 push_18">
<p>Push (80px)</p>
</div>
<!-- end .grid_2 .push_18 -->
<div class="grid_18 pull_2">
<p>Pull (880px)</p>
</div>
<!-- end .grid_18.pull_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_3 push_17">
<p>Push (130px)</p>
</div>
<!-- end .grid_3 .push_17 -->
<div class="grid_17 pull_3">
<p>Pull (830px)</p>
</div>
<!-- end .grid_17.pull_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_4 push_16">
<p>Push (180px)</p>
</div>
<!-- end .grid_4 .push_16 -->
<div class="grid_16 pull_4">
<p>Pull (780px)</p>
</div>
<!-- end .grid_16.pull_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_5 push_15">
<p>Push (230px)</p>
</div>
<!-- end .grid_5 .push_15 -->
<div class="grid_15 pull_5">
<p>Pull (730px)</p>
</div>
<!-- end .grid_15.pull_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_6 push_14">
<p>Push (280px)</p>
</div>
<!-- end .grid_6 .push_14 -->
<div class="grid_14 pull_6">
<p>Pull (680px)</p>
</div>
<!-- end .grid_14.pull_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_7 push_13">
<p>Push (330px)</p>
</div>
<!-- end .grid_7 .push_13 -->
<div class="grid_13 pull_7">
<p>Pull (630px)</p>
</div>
<!-- end .grid_13.pull_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_8 push_12">
<p>Push (380px)</p>
</div>
<!-- end .grid_8 .push_12 -->
<div class="grid_12 pull_8">
<p>Pull (580px)</p>
</div>
<!-- end .grid_12.pull_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_9 push_11">
<p>Push (430px)</p>
</div>
<!-- end .grid_9 .push_11 -->
<div class="grid_11 pull_9">
<p>Pull (530px)</p>
</div>
<!-- end .grid_11.pull_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_10 push_10">
<p>Push (480px)</p>
</div>
<!-- end .grid_10 .push_10 -->
<div class="grid_10 pull_10">
<p>Pull (480px)</p>
</div>
<!-- end .grid_10.pull_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_11 push_9">
<p>Push (530px)</p>
</div>
<!-- end .grid_11 .push_9 -->
<div class="grid_9 pull_11">
<p>Pull (430px)</p>
</div>
<!-- end .grid_9.pull_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_12 push_8">
<p>Push (580px)</p>
</div>
<!-- end .grid_12 .push_8 -->
<div class="grid_8 pull_12">
<p>Pull (380px)</p>
</div>
<!-- end .grid_8.pull_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_13 push_7">
<p>Push (630px)</p>
</div>
<!-- end .grid_13 .push_7 -->
<div class="grid_7 pull_13">
<p>Pull (330px)</p>
</div>
<!-- end .grid_7.pull_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_14 push_6">
<p>Push (680px)</p>
</div>
<!-- end .grid_14 .push_6 -->
<div class="grid_6 pull_14">
<p>Pull (280px)</p>
</div>
<!-- end .grid_6.pull_14 -->
<div class="clear">&nbsp;</div>
<div class="grid_15 push_5">
<p>Push (730px)</p>
</div>
<!-- end .grid_15 .push_5 -->
<div class="grid_5 pull_15">
<p>Pull (230px)</p>
</div>
<!-- end .grid_5.pull_15 -->
<div class="clear">&nbsp;</div>
<div class="grid_16 push_4">
<p>Push (780px)</p>
</div>
<!-- end .grid_16 .push_4 -->
<div class="grid_4 pull_16">
<p>Pull (180px)</p>
</div>
<!-- end .grid_4.pull_16 -->
<div class="clear">&nbsp;</div>
<div class="grid_17 push_3">
<p>Push (830px)</p>
</div>
<!-- end .grid_17 .push_3 -->
<div class="grid_3 pull_17">
<p>Pull (130px)</p>
</div>
<!-- end .grid_3.pull_17 -->
<div class="clear">&nbsp;</div>
<div class="grid_18 push_2">
<p>Push (880px)</p>
</div>
<!-- end .grid_18 .push_2 -->
<div class="grid_2 pull_18">
<p>Pull (80px)</p>
</div>
<!-- end .grid_2.pull_18 -->
<div class="clear">&nbsp;</div>
<div class="grid_19 push_1">
<p>Push (930px)</p>
</div>
<!-- end .grid_19 .push_1 -->
<div class="grid_1 pull_19">
<p>Pull (30px)</p>
</div>
<!-- end .grid_1.pull_19 -->
<div class="clear">&nbsp;</div>
<div class="grid_20">
<p>This valid css/xhtml grid system is created by the <a href="http://www.gridsystemgenerator.com">Grid System Generator</a><br/>
Based on the 960.gs grid system.<br/>
<a href="http://validator.w3.org/check/referer">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
<!-- end .grid_20 -->
<div class="clear">&nbsp;</div>
</div>
<!-- end .container_20 -->
</body></html>